import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:musicapp/model/recommend.dart';
import 'package:musicapp/model/top_list.dart';
import 'package:musicapp/utils/navigator_util.dart';
import 'package:musicapp/utils/net_utils.dart';
import 'package:musicapp/widgets/common_text_style.dart';
import 'package:musicapp/widgets/h_empty_view.dart.dart';
import 'package:musicapp/widgets/rounded_net_image.dart';
import 'package:musicapp/widgets/v_empty_view.dart';
import 'package:musicapp/widgets/widget_future_builder.dart';

class TopListPage extends StatefulWidget {
  @override
  _TopListPageState createState() => _TopListPageState();
}

class _TopListPageState extends State<TopListPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('排行榜'),
        centerTitle: true,
        elevation: 0,
      ),
      body: CustomFutureBuilder<TopListData>(
        futureFunc: NetUtils.getTopListData,
        builder: (context, data) {
          // officialTopListData 官方榜的数据, moreTopListData 更多榜单的数据
          List<TopList> officialTopListData =
              data.list.where((l) => l.tracks.isNotEmpty).toList();
          List<TopList> moreTopListData =
              data.list.where((l) => l.tracks.isEmpty).toList();

          // 可滚动widget
          return SingleChildScrollView(
            scrollDirection: Axis.vertical, //滚动方向，默认是垂直方向
            reverse: false, //是否按照阅读方向相反的方向滑动。
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                // 官方榜单
                ListView.separated(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  padding: EdgeInsets.only(
                    top: ScreenUtil().setWidth(40),
                    left: ScreenUtil().setWidth(40),
                  ),
                  itemCount: officialTopListData.length + 1,
                  separatorBuilder: (context, index) {
                    return VEmptyView(20);
                  },
                  itemBuilder: (context, index) {
                    if (index == 0) {
                      return Text('官方榜', style: bold20TextStyle);
                    } else {
                      TopList officialTopData = officialTopListData[index - 1];
                      int i = 1; // 排行榜名次

                      return GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onTap: () {
                          toPlayListPage(officialTopData);
                        },
                        child: Container(
                          height: ScreenUtil().setWidth(200),
                          child: Row(
                            children: <Widget>[
                              Stack(
                                children: <Widget>[
                                  RoundedNetImage(
                                    officialTopData.coverImgUrl,
                                    width: 200,
                                    height: 200,
                                    radius: 5,
                                  ),
                                  Positioned(
                                    bottom: 0,
                                    child: Image.asset(
                                      'images/ck.9.png',
                                      width: ScreenUtil().setWidth(200),
                                      height: ScreenUtil().setWidth(80),
                                      fit: BoxFit.fill,
                                    ),
                                  ),
                                  Positioned(
                                    child: Text(
                                      officialTopData.updateFrequency,
                                      style: smallWhiteTextStyle,
                                    ),
                                    left: ScreenUtil().setWidth(10),
                                    bottom: ScreenUtil().setWidth(10),
                                  )
                                ],
                              ),
                              HEmptyView(20),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisSize: MainAxisSize.min,
                                  children: officialTopData.tracks.map((t) {
                                    return Container(
                                      alignment: Alignment.centerLeft,
                                      height: ScreenUtil().setWidth(65),
                                      child: Text(
                                        '${i++}.${t.first} - ${t.second}',
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                        style: common13TextStyle,
                                      ),
                                    );
                                  }).toList(),
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    }
                  },
                ),
                // 更多榜单
                Padding(
                  padding: EdgeInsets.only(
                    top: ScreenUtil().setWidth(60),
                    bottom: ScreenUtil().setWidth(30),
                    left: ScreenUtil().setWidth(40),
                  ),
                  child: Text('更多榜单', style: bold20TextStyle),
                ),
                GridView.builder(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3, childAspectRatio: 1 / 1.2),
                  itemCount: moreTopListData.length,
                  itemBuilder: (context, index) {
                    TopList detail = moreTopListData[index];

                    return GestureDetector(
                      behavior: HitTestBehavior.translucent,
                      onTap: () {
                        toPlayListPage(detail);
                      },
                      child: Align(
                        alignment: Alignment.topCenter,
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Stack(
                              children: <Widget>[
                                RoundedNetImage(detail.coverImgUrl,
                                    width: 200, height: 200, radius: 5),
                                Positioned(
                                  bottom: 0,
                                  child: Image.asset(
                                    "images/ck.9.png",
                                    width: ScreenUtil().setWidth(200),
                                    height: ScreenUtil().setWidth(80),
                                    fit: BoxFit.fill,
                                  ),
                                ),
                                Positioned(
                                  child: Text(detail.updateFrequency,
                                      style: smallWhiteTextStyle),
                                  left: ScreenUtil().setWidth(10),
                                  bottom: ScreenUtil().setWidth(10),
                                )
                              ],
                            ),
                            VEmptyView(10),
                            Container(
                              child:
                                  Text(detail.name, style: common13TextStyle),
                              width: ScreenUtil().setWidth(200),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  void toPlayListPage(TopList data) {
    NavigatorUtil.goPlayListPage(
      context,
      data: Recommend(
        picUrl: data.coverImgUrl,
        name: data.name,
        playcount: data.playCount,
        id: data.id,
      ),
    );
  }
}
